<template>
  <div class="Order">
    <ul class="header__tab">
      <li class="header__tab__item" :class="{'header__tab__item__active': queryData.orderStatus == ''}" @click="setSearchType('')">全部</li>
      <li class="header__tab__item" :class="{'header__tab__item__active': queryData.orderStatus == '0'}" @click="setSearchType('0')">已取消</li>
      <li class="header__tab__item" :class="{'header__tab__item__active': queryData.orderStatus == '1'}" @click="setSearchType('1')">待支付</li>
      <li class="header__tab__item" :class="{'header__tab__item__active': queryData.orderStatus == '2'}" @click="setSearchType('2')">待发货</li>
      <li class="header__tab__item" :class="{'header__tab__item__active': queryData.orderStatus == '3'}" @click="setSearchType('3')">代签收</li>
      <li class="header__tab__item" :class="{'header__tab__item__active': queryData.orderStatus == '4'}" @click="setSearchType('4')">已完成</li>
    </ul>
    <div class="Order__body">
      <div class="Order__contnet">
        <div class="Order__search">
          <div class="Order__search__right">
            <button class="Ecp-button-primary" @click="getGoodsOrderInfoList(1)">搜索</button>
          </div>
          <div class="Order__search__left">
            <div class="Order__search__group">
              <span class="Order__search__name">商品名称</span>
              <input class="Order__search__input" v-model="queryData.goodsName" style="width: 128px;" placeholder="请输入商品名称"/>
            </div>
            <div class="Order__search__group">
              <span class="Order__search__name">客户名称</span>
              <input class="Order__search__input" v-model="queryData.consignee" style="width: 128px;" placeholder="请输入客户名称"/>
            </div>
            <div class="Order__search__group">
              <span class="Order__search__name">价格</span>
              <input class="Order__search__input" v-model="queryData.lowPrice" placeholder="单行输入"/>
              <span class="Order__search__name">至</span>
              <input class="Order__search__input" v-model="queryData.hirePrice" placeholder="单行输入"/>
            </div><br>
            <div class="Order__search__group">
              <span class="Order__search__name">配送时段</span>
              <el-date-picker
                v-model="queryData.startTime"
                style="width: 128px;"
                type="datetime"
                placeholder="开始时段"
                align="right">
              </el-date-picker>
              <span class="Order__search__name">至</span>
              <el-date-picker
                v-model="queryData.endTimd"
                style="width: 128px;"
                type="datetime"
                placeholder="结束时段"
                align="right">
              </el-date-picker>
            </div>
            <div class="Order__search__group">
              <el-select
                v-model="routers"
                multiple
                collapse-tags
                style="width: 150px;"
                placeholder="路线筛选">
                <el-option
                  v-for="item in routerOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="Order__routes">
          <span class="Order__route">线路1:999件/9家</span>
          <span class="Order__route">线路2:999件/9家</span>
          <span class="Order__route">线路3:999件/9家</span>
        </div>
        <div class="Order__table__header">
          <div style="float:right;">
            <el-button size="mini" @click.native="doSortList('bestTime')" round>送达时间
              <i v-show="sortData.bestTime==2" :class="{'Order__sort__active': sortData.rankName=='bestTime'}" class="el-icon-caret-bottom el-icon--right"></i>
              <i v-show="sortData.bestTime==1" :class="{'Order__sort__active': sortData.rankName=='bestTime'}" class="el-icon-caret-top el-icon--right"></i>
            </el-button>
            <el-button size="mini" @click.native="doSortList('number')" round>数量
              <i v-show="sortData.number==2" :class="{'Order__sort__active': sortData.rankName=='number'}" class="el-icon-caret-bottom el-icon--right"></i>
              <i v-show="sortData.number==1" :class="{'Order__sort__active': sortData.rankName=='number'}" class="el-icon-caret-top el-icon--right"></i>
            </el-button>
            <el-button size="mini" @click.native="doSortList('service_name')" round>服务
              <i v-show="sortData.service_name==2" :class="{'Order__sort__active': sortData.rankName=='service_name'}" class="el-icon-caret-bottom el-icon--right"></i>
              <i v-show="sortData.service_name==1" :class="{'Order__sort__active': sortData.rankName=='service_name'}" class="el-icon-caret-top el-icon--right"></i>
            </el-button>
            <el-button size="mini" @click.native="doSortList('goodsAmount')" round>交易全额
              <i v-show="sortData.goodsAmount==2" :class="{'Order__sort__active': sortData.rankName=='goodsAmount'}" class="el-icon-caret-bottom el-icon--right"></i>
              <i v-show="sortData.goodsAmount==1" :class="{'Order__sort__active': sortData.rankName=='goodsAmount'}" class="el-icon-caret-top el-icon--right"></i>
            </el-button>
          </div>
          <div class="Order__table__header__left">
            <el-checkbox>全选</el-checkbox>
            <button class="Ecp-button-primary" style="margin-left:28px;height:28px;">发货</button>
            <button class="Ecp-button-primary" style="margin-left:18px;height:28px;">关闭</button>
          </div>
        </div>
        <div class="Order__table__body">
          <el-table
            :height="getTableHeight"
            :show-header="false"
            ref="multipleTable"
            :data="tableData"
            style="width: 100%;font-size:16px;">
            <el-table-column
              type="selection"
              width="45">
            </el-table-column>
            <el-table-column
              label="产品"
              width="300">
              <div class="Order__table__card" slot-scope="scope">
                <img class="Order__table__card__img" :src="scope.row.imgUrl" alt="">
                <div class="Order__table__card__right">
                  <p class="Order__table__card__name">{{scope.row.goodsName}}</p>
                  <!-- <p class="Order__table__card__name">{{scope.row.name}}</p> -->
                  <p class="Order__table__card__id">商品规格：{{scope.row.id}}</p>
                  <p class="Order__table__card__shop">
                    <el-tooltip class="item" effect="dark" :content="scope.row.mobile" placement="top-start">
                      <i class="el-icon-phone"></i>
                    </el-tooltip>
                    <span>{{scope.row.consignee}}</span>
                  </p>
                </div>
              </div>
            </el-table-column>
            <el-table-column
              width="80">
              <div style="color: #409EFF;margin-bottom:40px;" slot-scope="scope">
                <span>{{ scope.row.orderStatus | orderStatusFilters }}</span>
              </div>
            </el-table-column>
            <el-table-column
              width="100"
              label="路线"
              show-overflow-tooltip>
              <div style="color: #409EFF;margin-bottom:40px;" slot-scope="scope">
                <span style="color: #409EFF;margin-bottom:40px;">{{ scope.row.router }}<br>叠加</span>
              </div>
            </el-table-column>
            <el-table-column
              label="送达时间">
              <div style="margin-bottom:40px;" slot-scope="scope">
                <span>{{ scope.row.bestTime }}</span>
              </div>
            </el-table-column>
            <el-table-column
              label="服务">
              <div slot-scope="scope">
                <div class="Order__table__col__server">
                  <span>{{ scope.row.number }}</span>
                  <span>{{ scope.row.service_name }}</span>
                  <span>{{ scope.row.goodsAmount }}</span>
                </div>
                <div style="height:40px;text-align:right;">
                  <el-button type="text">发货</el-button>
                  <el-button type="text">退款</el-button>
                  <el-button @click.native="editOrder(scope.row)" type="text">修改订单</el-button>
                </div>
              </div>
            </el-table-column>
          </el-table>
          <div class="block" style="margin-top:15px;text-align: center;">
            <el-pagination
            v-show="pageData.total"
              layout="prev, pager, next"
              @current-change="getGoodsOrderInfoList"
              :page-size="pageData.pageSize"
              :current-page="pageData.pageNum"
              :total="pageData.total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 修改订单弹层 -->
    <el-dialog
      top="66px"
      :visible.sync="dialogVisible"
      width="380px"
      class="Order__dialog"
      center>
      <el-form :model="form" ref="dialogForm" label-width="100px" label-position="left" class="Server__form">
        <el-form-item
          :rules="[{ required: true, message: '商品数量输入框'}]">
          <img style="vertical-align: middle;height:102px;" slot="label" :src="form.imgUrl">
          <p style="font-size: 16px; margin-bottom:10px;">{{form.name}}</p>
          <el-select
            v-model="routers"
            style="width: 100%;margin-bottom:17px;"
            placeholder="商品规格下拉列表">
            <el-option
              v-for="item in routerOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <!-- <el-input type="number" placeholder="商品数量输入框" auto-complete="off"></el-input> -->
          <input style="width:100%;" type="number" v-model.number="form.price" placeholder="商品数量输入框" auto-complete="off" class="Order__search__input">
        </el-form-item>
        <el-form-item
          label="订购服务"
          :rules="[
            { required: true, message: '请选择订购服务'}
          ]"
        >
          <el-select
            v-model="routers"
            style="width: 100%;"
            placeholder="服务下拉列表">
            <el-option
              v-for="item in routerOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="服务数量"
          :rules="[
            { required: true, message: '请设置服务数量'}
          ]"
        >
          <el-select
            v-model="routers"
            style="width: 100%;"
            placeholder="商品规格下拉列表">
            <el-option
              v-for="item in routerOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="商家地址"
          :rules="[{ required: true, message: '商家地址不能为空'}]">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入商家地址">
          </el-input>
        </el-form-item>
        <el-form-item
          label="分配路线"
          :rules="[
            { required: true, message: '请设置配送路线'}
          ]"
        >
          <el-select
            v-model="routers"
            style="width: 100%;"
            placeholder="设置配送路线">
            <el-option
              v-for="item in routerOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="送达时间"
          prop="time"
          :rules="[
            { required: true, message: '请设置送达时间'}
          ]"
        >
          <el-date-picker
            style="width:100%;"
            type="datetime"
            placeholder="设置送达时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="订单价格"
          prop="price"
          :rules="[
            { required: true, message: '价格不能为空'},
            { type: 'number', message: '价格必须为数字值'}
          ]"
        >
          <!-- <el-input v-model.number="form.price" placeholder="请输入价格" auto-complete="off"></el-input> -->
          <input style="width:100%;" type="number" v-model.number="form.price" placeholder="请输入价格" auto-complete="off" class="Order__search__input">
        </el-form-item>
      </el-form>
      <span slot="footer" class="Server__dialog__footer">
        <el-button type="text" @click="resetForm">取 消</el-button>
        <el-button type="text" style="margin-left:124px;" @click="dialogVisible=false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import testImg from '~/static/images/de.png'
import {findGoodsOrderInfoList} from '~/api/wang'
import {findGoodsOrderGoodsList} from '~/api/apiv1'
  export default {
    async asyncData ({app}) {
      try {
        const queryData = {
          lowPrice: '',
          hirePrice: '',
          startTime: '',
          endTimd: '',
          consignee: '',
          orderStatus: '',
          shippingStatus: '',
          pay_status: '',
          rank: '',
          rankName: '',
          supplyUser: '',
          goodsName: '',
          pageNum: 1,
          pageSize: 15
        }
        const res = await findGoodsOrderInfoList(app, queryData)
          // return ({tableData:res.data.goodsOrderInfoList})
        if (res.data.page.list.length > 0) {
          const {pageNum, pageSize, total, totalNum} = res.data.page
          return {tableData: res.data.page.list, pageData: {pageNum, pageSize, pageSize, total, totalNum}}
        }else {
          return {
          tableData: [],
          message: res.message,
          pageData: {
            pageNum: 1,
            pageSize: 15,
            total: 0,
            totalNum: 1
          }}
        }
      } catch (error) {
        console.error(`订单商品查询接口错误，错误信息：${error}`)
      }
    },
    beforeMount() {
      if (this.tableData.length==0&&this.message) {
        this.$alert(this.message, '提示', {type: 'error'})
      }
    },
    data() {
      return {
        dialogVisible: false,
        sortData: {
          rankName: 'bestTime',
          bestTime:2,
          number:2,
          service_name:2,
          goodsAmount: 2
        },
        queryData: {
          lowPrice: '',
          hirePrice: '',
          startTime: '',
          endTimd: '',
          consignee: '',
          orderStatus: '',
          shippingStatus: '',
          pay_status: '',
          rank: '',
          rankName: '',
          supplyUser: '',
          goodsName: '',
          pageNum: 1,
          pageSize: 15
        },
        // tableData: [{
        //   id: '123',
        //   name: '本草纲目',
        //   imgUrl: testImg,
        //   status: 0,
        //   router: '线路1',
        //   time: '送达时间2018-05-0312：00',
        //   service: '回空100x1',
        //   price: '900'
        // },
        // {
        //   id: '1234',
        //   name: '本草纲目1',
        //   imgUrl: testImg,
        //   status: 0,
        //   router: '线路1',
        //   time: '送达时间2018-05-0312：00',
        //   service: '回空100x1',
        //   price: '900'
        // }],
        defaultTimerPicker:{
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        routerOptions: [{
          label:'路线1',
          value: '1'
        },{
          label:'路线2',
          value: '2'
        },{
          label:'路线3',
          value: '3'
        }],
        search: {
          type: 'all0'
        },
        something: '',
        routers: [],
        form:{
          id: '',
          name: '',
          imgUrl: testImg,
          status: '',
          router: '',
          time: '',
          service: '',
          price: ''
        }
      }
    },
    methods: {
      doSortList(rankName) {
        this.queryData.rankName = rankName
        this.queryData.rank = this.queryData.rank == 1 ? 2 : 1
        this.sortData.rankName = rankName
        this.sortData[rankName] = this.queryData.rank
        this.getGoodsOrderInfoList(1)
      },
      async getGoodsOrderInfoList(pageNum) {
        const {
          lowPrice,
          hirePrice,
          startTime,
          endTimd,
          consignee,
          orderStatus,
          shippingStatus,
          pay_status,
          rank,
          rankName,
          supplyUser,
          goodsName,
          pageSize
        } = this.queryData
        const res = await findGoodsOrderInfoList(this, {lowPrice, hirePrice, startTime, endTimd, consignee, orderStatus, shippingStatus, pay_status, rank, rankName, supplyUser, goodsName, pageNum, pageSize})
        if (res.code != '0') this.$alert(res.message, '提示', {type: 'error'})
        const {pageN, pageS, total, totalNum} = res.data.page
        this.tableData = res.data.page.list
        this.pageData = {pageNum: pageN, pageSize:pageS, pageSize, total, totalNum}
      },
      resetForm() {
        this.$refs['dialogForm'].resetFields()
        this.dialogVisible = false
      },
      setSearchType (type) {
        this.queryData.orderStatus = type
        this.getGoodsOrderInfoList(1)
      },
      async editOrder(data) {
          this.form.id = data.id
          this.form.name = data.name
          this.form.imgUrl = data.imgUrl
          this.form.status = data.status
          this.form.router = data.router
          this.form.time = data.time
          this.form.service = data.service
          this.form.price = data.price
          this.dialogVisible = true
        const res = await findGoodsOrderGoodsList(this, data.id)
        console.log(res)
      }
    },
    computed:{
      getTableHeight () {
        return this.$store.state.innerHeight-324
      }
    },
    filters: {
      orderStatusFilters(status) {
        if (status == '') return
        return {
          '0': '已取消',
          '1': '待支付',
          '2': '待发货',
          '3': '待签收',
          '4': '已完成'
        }[status]
      }
    }
  }
</script>

<style lang="scss" scoped>
.Order {
  min-height: 100vh;
  background-color: #f3f3f3;
  &__sort__active {
    color: rgb(64, 158, 255);
  }
  &__dialog {
    & /deep/ {
      .el-form-item__label, .el-form-item__content {
        font-size: 16px;
        line-height: 25px;
      }
      .el-input__icon {
        line-height: 25px;
      }
      .el-tag--small {
        height: 20px;
        line-height: 20px;
      }
      .el-range-input, .el-textarea__inner {
        background-color: #f0f5fb;
      }
      .el-input__inner, .el-input--suffix{
        height: 25px;
        line-height: 25px;
        background-color: #f0f5fb;
        border: none;
        border-radius: 8px;
      }
      .el-date-editor {
        .el-input__icon {
          line-height: 25px;
        }
      }
    }
  }
  &__table {
    &__body {
      padding: 15px;
      text-align: center;
    }
    &__card {
      position: relative;
      text-align: left;
      margin-bottom: 40px;
      &__img {
        float: left;
        width: 54px;
        height: 83px;
      }
      &__right {
        margin-left: 70px;
      }
      &__name {
        font-size: 16px;
        line-height: 16px;
        height: 40px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        word-break: break-all;
      }
      &__shop {
        font-size: 16px;
      }
      &__id {
        font-size: 12px;
        line-height: 20px;
      }
    }
    &__col {
      & /deep/ {
        .el-button--text {
          font-size: 16px;
        }
      }
      &__server {
        height: 83px;
        line-height: 83px;
        text-align: center;
        span {
          display: inline-block;
          line-height: 1em;
          width: 33.33%;
        }
      }
    }
    &__header {
      height: 58px;
      line-height: 28px;
      padding: 15px 26px;
      & /deep/ {
        .el-button {
          background-color: #f0f5fb;
          border: none;
        }
      }
    }
  }
  &__body {
    padding: 20px 30px;
  }
  &__route {
    margin-right: 35px;
  }
  &__routes {
    padding: 15px 0 15px 65px;
    line-height: 28px;
    position: relative;
    &:before {
      content: "";
      display: block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #333856;
      position: absolute;
      top: 26px;
      left: 29px;
    }
  }
  &__search {
    padding: 10px 10px 0;
    height: 100px;
    border-bottom: 1px solid #bdbdbd;
    & /deep/ {
      .el-input__icon {
        line-height: 25px;
      }
      .el-tag--small {
        height: 20px;
        line-height: 20px;
      }
      .el-range-input {
        background-color: #f0f5fb;
      }
      .el-input__inner, .el-input--suffix{
        height: 25px;
        line-height: 25px;
        background-color: #f0f5fb;
        border: none;
        border-radius: 8px;
      }
      .el-date-editor {
        .el-range__icon, .el-range__close-icon, .el-range-separator {
          line-height: 20px;
        }
      }
    }
    &__group {
      height: 28px;
      line-height: 28px;
      display: inline-block;
      margin-bottom: 10px;
      margin-right: 28px;
    }
    &__name {
      vertical-align: middle;
      margin-right: 15px;
    }
    &__input {
      height: 25px;
      background-color: #f0f5fb;
      border-radius: 9px;
      vertical-align: middle;
      border: none;
      padding: 0 10px;
      text-align: center;
      font-size: 13px;
      width: 86px;
      &:focus {
        outline: none;
      }
    }
    &__left {
      margin-right: 108px;
      padding: 5px 0 5px 55px;
      position: relative;
      &:before {
        content: "";
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #333856;
        position: absolute;
        top: 16px;
        left: 19px;
      }
    }
    &__right {
      float: right;
      width: 108px;
      margin-top: 23px;
    }
  }
  &__contnet {
    background-color: #fff;
  }
}
</style>
